<template>
	<view class="container">
		<view class="head">
			<view class="img">
				<image @tap="set_up" src="/static/images/shezhi1.png"></image>
			</view>
			<view class="account">
				<view v-show="token" class="user_profile">
					<image :src="avatar" mode="widthFix"></image>
				</view>
				<!-- <view class="member_type">{{ userInfo.vip_name }}</view> -->
				<view class="other">
					<view class="other_item" @tap="discount_coupon">
						<view>優惠劵</view>
						<view>{{ userInfo.coupons_1 }}</view>
					</view>
					<view class="other_item" @tap="electronic_ticket_roll">
						<view>電子票卷</view>
						<view>{{ userInfo.coupons_2 }}</view>
					</view>
					<!-- <view class="other_item" @tap="stored_value_card">
						<view>儲值卡</view>
						<view>{{ userInfo.coupons_3 }}</view>
					</view> -->
					<view class="other_item" @tap="go_balance">
						<view>餘額</view>
						<view>{{ userInfo.balance }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="other_btns">
			<view class="btns_box" @tap="stored_value">
				<image style="" src="/static/images/chongzhi1.png"></image>
				<view>充值</view>
			</view>
			<!-- <view class="btns_box" @tap="showChange">
				<image src="/static/images/web__jiangli.png"></image>
				<view>分享奬勵</view>
			</view> -->
			<view class="btns_box" @tap="want_join">
				<image src="/static/images/jiameng_2.png"></image>
				<view>我要加盟</view>
			</view>
			<view class="btns_box" @tap="my_order">
				<image src="/static/images/my_order1.png"></image>
				<view>我的訂單</view>
			</view>
			<view class="btns_box" @tap="about_us">
				<image src="/static/images/bangzhuguanyuwomen.png"></image>
				<view>關於我們</view>
			</view>
			<view class="btns_box" @tap="show=true">
				<image src="/static/images/kefu (1).png"></image>
				<view>聯繫客服</view>
			</view>
			<u-modal :show="show" @confirm="confirmCall" @cancel="show=false" @close="show=false"
				:closeOnClickOverlay="true" :showCancelButton="true" title="聯繫客服"
				:content='platformInfo.value'></u-modal>


			<view class="btns_box" @tap="change_password">
				<image src="/static/images/xiugai.png"></image>
				<view>修改密碼</view>
			</view>
			<view class="btns_box" @tap="showExit=true">
				<image src="/static/images/tuichu.png"></image>
				<view>退出</view>
			</view>
			<view class="btns_box" @tap="showLogOff=true">
				<image src="/static/images/zhuxiao.png"></image>
				<view>註銷賬戶 <text style="font-size: 24rpx;color: #999;">（註銷賬號無法恢復，請謹慎操作）</text> </view>
			</view>
		</view>

		<u-modal :show="showExit" @confirm="confirmExit" @cancel="showExit=false" @close="showExit=false"
			:closeOnClickOverlay="true" :showCancelButton="true">
			<view class="">確認退出</view>
		</u-modal>

		<u-modal :show="showLogOff" @confirm="confirmLogOff" @cancel="showLogOff=false" @close="showLogOff=false"
			:closeOnClickOverlay="true" title="確認註銷" :showCancelButton="true">
			<view class="">賬號註銷無法恢復，請謹慎操作！</view>
		</u-modal>

		<!-- 分享彈框 -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" style="border-radius: 16rpx;">
			<view class="popup_box">
				<image class="log" src="/static/images/web__jiangli.png"></image>
				<view class="invite">邀請新朋友註冊</view>
				<view style="font-size: 24rpx;margin-bottom: 16rpx;">朋友接受邀請并註冊成功，可得大包間2小時體驗卷</view>
				<view class="go_invite">去邀請</view>
				<view style="font-size: 24rpx;color: #999;">點擊去邀請，自動保存圖片和口令</view>
				<image src="/static/images/guanbi.png" class="close" @tap="closePopup"></image>
			</view>
		</uni-popup>

		<view class="">

			<u-tabbar :value="tabbarValue" activeColor="#39B19D" :safeAreaInsetBottom="false" :placeholder="false">
				<u-tabbar-item @click="tabbarClick" v-for="(item,index) in tabber" :key="index" :text="item.text">
					<image class="u-page__item__slot-icon" slot="active-icon" :src="item.inactiveImg"></image>
					<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.activeImg"></image>
				</u-tabbar-item>
			</u-tabbar>

		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getInviteCode,
		getAboutUs,
		accountLogOff
	} from '@/api/me.js'
	import baseURL from '@/utils/baseURL.js'

	export default {
		data() {
			return {
				showPopup: false,
				userInfo: "",
				avatar: "",
				invite_code: '',
				token: null,
				tabber: [{
						text: '首頁',
						activeImg: '/static/images/shouyefill.png',
						inactiveImg: '/static/images/shouyefill1.png',
					},
					{
						text: '訂單',
						activeImg: '/static/images/my_order.png',
						inactiveImg: '/static/images/my_order1.png',
					},
					{
						text: '我的',
						activeImg: '/static/images/wodedamaijihuo1.png',
						inactiveImg: '/static/images/wodedamaijihuo.png',
					},
				],
				tabbarValue: 2,
				showExit: false,
				platformInfo: {
					name: '',
					value: '',
				},
				show: false,
				showLogOff: false,
			};
		},
		methods: {
			showChange: function() {
				this.$refs['popup'].open()
				// 獲取邀請碼
				getInviteCode({
					store_id: 6
				}).then(res => {
					// console.log(res.data,'邀請碼')
					this.invite_code = res.data.invite_code
				})
			},
			closePopup: function() {
				// console.log("close")
				this.$refs['popup'].close()
			},
			want_join: function() {
				uni.navigateTo({
					url: '/pages/want_join/want_join'
				})
			},
			discount_coupon: function() {
				uni.navigateTo({
					url: "/pages/discount_coupon/discount_coupon"
				})
			},
			go_balance: function() {
				uni.navigateTo({
					url: "/pages/balance/balance"
				})
			},
			set_up: function() {
				uni.navigateTo({
					url: "/pages/set_up/set_up"
				})
			},
			about_us: function() {
				uni.navigateTo({
					url: "/pages/about_us/about_us"
				})
			},
			my_order: function() {
				uni.reLaunch({
					url: "/pages/order/order"
				})
			},
			electronic_ticket_roll: function() {
				uni.navigateTo({
					url: "/pages/electronic_ticket_roll/electronic_ticket_roll"
				})
			},
			stored_value() {
				uni.navigateTo({
					url: "/pages/balance/balance"
				})
			},
			stored_value_card() {
				uni.navigateTo({
					url: "/pages/me/stored_value_card/stored_value_card"
				})
			},
			tabbarClick(e) {
				this.token = uni.getStorageSync('ONEtoken')
				switch (e) {
					case 0:
						uni.reLaunch({
							url: '/pages/index/index'
						})
						break;
					case 1:
						if (this.token) {
							uni.reLaunch({
								url: '/pages/order/order'
							})
						} else {
							uni.navigateTo({
								url: "/pages/login_register/login_register?flag=0"
							})
						}
						break;
				}
			},
			confirmExit() {
				uni.removeStorage({
					key: 'ONEtoken',
					success: function(res) {
						uni.showToast({
							title: '退出成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login_register/login_register?flag=0'
							})
						}, 1000)
					}
				});
				uni.removeStorageSync('userInfo')
			},
			change_password() {
				uni.navigateTo({
					url: "/pages/change_password/change_password"
				})
			},
			confirmCall() {
				uni.makePhoneCall({
					phoneNumber: this.platformInfo.value
				})
				this.show = false
			},
			confirmLogOff() {
				accountLogOff().then(res => {
					uni.showToast({
						title: '賬戶已註銷',
						icon: 'success',
						duration: 1000
					})
					this.showLogOff = false
					setTimeout(() => {
						this.confirmExit()
					}, 1100)
				})

			},
		},
		onLoad() {
			getAboutUs().then(res => {
				// console.log(res,'平臺信息')
				this.platformInfo = res.data.filter(item => item.name === 'tel')[0]
				// console.log(this.platformInfo,'平臺信息')
			})
		},
		onShow() {
			this.token = uni.getStorageSync('ONEtoken')
			if (!this.token) {
				uni.navigateTo({
					url: "/pages/login_register/login_register?flag=0"
				})
			}
			// console.log(this.token)

			if (this.token) {
				getUserInfo().then(res => {
					this.userInfo = res.data
					if (res.data.avatar) {
						this.avatar = baseURL + this.userInfo.avatar
					} else {
						this.avatar = '/static/images/moren.png'
					}

					// console.log(res.data, "用戶信息")
				})
			}

		},
		// mounted() {
		// 	let current = getCurrentPages()
		// 	// console.log(current,'current')
		// 	let page = current[current.length - 1]
		// 	// console.log(page,'page')
		// 	console.log(page)
		// }

	}
</script>

<style lang="less" scoped>
	.container {

		.head {
			height: calc(370rpx - 90rpx);
			background: #39B19D;
			padding: 0 31rpx;
			box-sizing: border-box;

			.img {
				width: 100%;
				display: flex;
				justify-content: end;
				position: relative;
				height: 80rpx;

				image {
					// display: inline-block;
					width: 45rpx;
					height: 45rpx;
					margin-right: 22rpx;
					margin-bottom: 28rpx;
					position: absolute;
					right: 0%;
					top: 0;
				}
			}

			.account {
				height: 287rpx;
				width: 100%;
				background: #fff;
				border-radius: 16rpx;
				box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
				padding-top: 14rpx;
				box-sizing: border-box;

				.user_profile {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					// background-color: skyblue;
					margin: 0 auto 20rpx;
					border: 1rpx solid #999;
					overflow: hidden;

					image {
						width: 100%;
						// height:100%;
						// border-radius: 50%;
					}
				}

				.member_type {
					width: 125rpx;
					height: 42rpx;
					line-height: 42rpx;
					border-radius: 16rpx;
					border: 1rpx solid #39B19D;
					color: #39B19D;
					font-size: 20rpx;
					margin: 0 auto;
					text-align: center;
					margin-bottom: 38rpx;
				}

				.other {
					display: flex;
					justify-content: space-around;

					.other_item {
						text-align: center;
						font-size: 30rpx;
					}
				}
			}
		}

		.other_btns {
			margin-top: 135rpx;
			// background-color: skyblue;
			display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			flex-direction: column;

			.btns_box {
				width: 100%;
				text-align: center;
				// margin-bottom: 35rpx;
				display: flex;
				align-items: center;
				padding: 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F2F2F2;

				image {
					width: 46rpx;
					height: 46rpx;
					margin-right: 13rpx;
				}

				view {
					font-size: 30rpx;
				}
			}

			/deep/ .u-modal__content__text {
				text-align: center;
				font-size: 30rpx !important;
				font-weight: 600;
			}

		}
	}

	.popup_box {
		width: calc(100vw - 64rpx);
		height: 563rpx;
		background: #fff;
		border-radius: 16rpx;
		text-align: center;

		.log {
			width: 100rpx;
			height: 100rpx;
			margin-top: 23rpx;
		}

		.invite {
			font-size: 30rpx;
			font-weight: bold;
			margin: 32rpx auto 16rpx;
		}

		.go_invite {
			width: 171rpx;
			height: 66rpx;
			background: #39B19D;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 1rpx solid #39B19D;
			color: #fff;
			line-height: 66rpx;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 24rpx;
		}

		.close {
			width: 80rpx;
			height: 80rpx;
			margin-top: 45rpx;
		}
	}

	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	/deep/ .u-tabbar__content__item-wrapper {
		height: 120rpx !important;
	}
</style>